<template>
    <div>
        <el-row>
            <el-col :xs="1" :sm="2" :md="3" :lg="3" :xl="3" class="forumCol">
                <div class="ep-bg-purple" />
            </el-col>
            <el-col :xs="18" :sm="16" :md="15" :lg="13" :xl="13" class="forumCol">
                <div class="grid-content ep-bg-purple-light">
                    <el-form :inline="true" :model="queryParams" class="queryForm">
                        <el-form-item label="标题" class="queryTitle">
                            <el-input v-model="queryParams.title" placeholder="标题" clearable />
                        </el-form-item>
                        <el-form-item label="学校" class="queryCollege">
                            <!--.forumStudent <el-input v-model="queryParams.collegeId" placeholder="请输入学院" clearable /> -->
                            <el-select v-model="queryParams.collegeId" filterable placeholder="请选择学院">
                                <el-option v-for="college in collegeList" :key="college.id" :label="college.name"
                                    :value="college.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="submit">
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                        <el-form-item class="reset">
                            <el-button type="primary" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="sort">
                        <span>排序方式：</span>
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                {{ getSortName(queryParams.orderByColumn) }}<el-icon
                                    class="el-icon--right"><arrow-down /></el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu v-for="(sort) in sortList" :key="sort.key">
                                    <el-dropdown-item @click="setSort(sort.key)">{{ sort.value }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <PostList :isLocal="isLocalSchool"></PostList>
                    <!-- :postList="postList" @putPostDetail="getPostDetail" -->
                </div>
            </el-col>
            <el-col :xs="4" :sm="4" :md="3" :lg="5" :xl="5" class="forumCol">
                <div class="grid-content ep-bg-purple-light">
                    <el-card style="max-width: 480px;">
                        <template #header>
                            <div class="card-header" style="color: rgb(1, 126, 204) ;text-align: center;">
                                <span style="font-size: 25px;font-weight: 500;margin: 5px 0;">本校时事</span>
                            </div>
                        </template>
                        <div v-for="event in eventList" :key="event.id" class="">
                            <div style="cursor: pointer;display: flex;flex-direction: row;" @click="putEvent(event.id)">
                                <div style="">{{ parseTitle(event.title) }}</div>
                                <div style="flex-grow: 1;"></div>
                                <div style="font-size: 12px;line-height: 22px;">{{ parseTimeString(event.createTime) }}</div>
                            </div>
                            <el-divider v-if="event.id == eventList[eventList.length-1].id?false:true" style="margin: 2px 0;"/>
                            <!-- <div style="cursor: pointer;" @click="centerDialogVisible = true">{{ event.title }}</div> -->
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :xs="1" :sm="2" :md="3" :lg="3" :xl="3" class="forumCol">
                <div class="ep-bg-purple-light" />
            </el-col>
        </el-row>
        <el-dialog class="centerDialogVisible" v-model="centerDialogVisible" :title="showEvent.title" width="500" destroy-on-close center>
            <div style="" v-html="showEvent.content">
            </div>
            <p style="display: flex;flex-direction: row-reverse;">发布时间:{{ parseTimeString(showEvent.createTime) }}</p>
        </el-dialog>
    </div>
</template>

<script>
import PostList from "@/components/PostList"
// import {listPost} from "@/api/forum/post"
import usePostStore from "@/store/forum/post"
import useEventStore from "@/store/forum/event"
import { listCollege } from "@/api/forum/college"
import useUserStore from "@/store/modules/user"
import useBaseStore from '@/store/forum/base'
import { parseTime } from '@/utils/ruoyi'

export default {
    name: 'localForumPage',
    data() {
        return {
            postList: [],
            collegeList: [],
            isLocalSchool: true,
            centerDialogVisible: false,
            changeEventId: null,
            showEvent: {},
        };
    },
    components: {
        PostList
    },
    computed: {
        schoolId() {
            return useUserStore().schoolId;
        },
        collegeId() {
            return useUserStore().collegeId;
        },
        queryParams() {
            return usePostStore().queryParams;
        },
        sortList() {
            return usePostStore().sortList;
        },
        eventList() {
            return useEventStore().eventList;
        }
    },
    created() {
        usePostStore().changeTab = '1';
        this.resetQuery();
        this.getPostList();
        this.getColleges();
        useEventStore().getEventListForSchoolId(this.schoolId);
    },
    methods: {
        parseTitle(title){
            var result = '';
            if(title.length>8){
                result = title.substring(0,7)+'...'; 
            }else{
                result = title;
            }
            return result;
        },
        parseTimeString(date) {
            return parseTime(new Date(date),"{y}-{m}-{d}");
        },
        putEvent(id) {
            this.changeEventId = id;
            for (var i = 0; i < this.eventList.length; i++) {
                if (this.eventList[i].id == id) {
                    this.showEvent = this.eventList[i];
                }
            }
            this.centerDialogVisible = true;
        },
        setSort(key) {
            usePostStore().setSort(key);
        },
        getSortName(key) {
            // console.log("排序方式：", key)
            return usePostStore().getSortValueForKey(key);
        },
        getPostList() {
            usePostStore().getPostList();
        },
        getColleges() {
            var query = {
                schoolId: useUserStore().schoolId
            }
            listCollege(query).then((res) => {
                this.collegeList = res.rows;
            })
        },
        handleQuery() {
            this.getPostList();
        },
        resetQuery() {
            usePostStore().resetQueryForLocal();
        },
        onSubmit() {
            this.getPostList();
        }
    }
}

</script>

<style scoped lang="scss">
.sort {
    font-size: 14.5px;
    margin: 0 0 0 25px;
}

.queryForm {
    margin: 0 0 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    .queryTitle {
        margin: 25px 20px 15px 20px;
        width: 30%;
        flex-grow: 2;
    }

    .queryCollege {
        margin: 25px 20px 15px 20px;
        width: 30%;
        flex-grow: 2;
    }

    .submit {
        margin: 25px 20px 15px 20px;
        width: 10%;
        flex-grow: 1;
    }

    .reset {
        margin: 25px 20px 15px 20px;
        width: 10%;
        flex-grow: 1;
    }
}

.forumCol {
    //   border-radius: 4px;
}

.grid-content {
    //   border-radius: 4px;
    min-height: 36px;
    //  height: 500px;
    //   border: 2px solid black;
    margin: 5px;
}
</style>